<!DOCTYPE html>
<html>
<link rel="match" href="../expected/overflow-hidden-6-ref.html" />
<style>
    .display-flex-position-relative {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .display-block {
        display: block
    }

    .overflow-hidden {
        overflow: hidden
    }

    .width-1050px {
        width: 100px
    }

    .width-100-percent {
        width: 100%
    }

    .left-0px {
        left: 0px
    }

    .bottom-0px {
        bottom: 0px
    }

    .height-100-percent {
        height: 100%
    }

    .top-50-percent {
        top: 50%
    }

    .left-50-percent {
        left: 50%
    }

    .transform-50-percent {
        transform: translateX(-50%) translateY(-50%);
    }

    .position-absolute {
        position: absolute
    }

    .height-auto {
        height: auto
    }

    .padding-bottom-100-percent {
        padding-bottom: 100%;
    }
</style>
<div class="display-flex-position-relative width-1050px">
    <div class="width-100-percent padding-bottom-100-percent"></div>
    <div class="position-absolute width-100-percent height-100-percent">
        <div
            class="height-100-percent width-100-percent position-absolute left-50-percent top-50-percent transform-50-percent">
            <div
                class="overflow-hidden position-absolute left-50-percent top-50-percent transform-50-percent width-100-percent height-100-percent ">
                <div class="display-block width-100-percent padding-bottom-100-percent"></div>
                <div class="bottom-0px left-0px position-absolute top-0px width-100-percent height-100-percent "
                    style="background-color: green;"></div>
            </div>
        </div>
    </div>
</div>
